<template>
    <div class="container">
      <gantt
      ref="childComponentRef"
        class="left-container"
        :tasks="tasks"
      ></gantt>
      <el-button
        type="primary"
        @click="exportHandler"
        >导出
      </el-button>
    </div>
  </template>
  
  <script>
  import gantt from './gantt.vue'
  
  export default {
    name: 'ganttNeed',
    components: { gantt },
    data() {
      return {
          childComponentRef: null,
        tasks: {
          data: [
            {
              id: 1,
              text: 'Task #1',
              start_date: '2020-01-17',
              duration: 3,
              progress: 1,
            },
            {
              id: 2,
              text: 'Task #2',
              start_date: '2020-01-20',
              duration: 3,
              progress: 1,
            },
          ],
          links: [{ id: 1, source: 1, target: 2, type: '0' }],
        },
      }
    },
    methods: {
      getChildComponentRef(ref) {
      this.childComponentRef = ref;
    },
    exportHandler() {
      this.$refs.childComponentRef.exportFn() 
    },
    },
  }
  </script>
  
  <style>
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
  </style>
  